<template>
    <section class="login">
		<img :src="this.$https.baseUrl + setting.site_logo" class="img1" alt="">
        <!-- <img src="../assets/newimg/logo.png" class="img1" alt=""> -->
		<img src="../assets/newimg/logobt.png" class="img2" alt="">
		<div class="ul">
			<div class="li active">
				<div>{{$t('h_title.login')}}</div>
				<i></i>
			</div>
			<div class="li" @click="gozhuce()">
				<div>{{$t('h_title.zhuce')}}</div>
			</div>
		</div>
		<div class="qiehuanyuyanBox">
			<img :src="require(''+'@/assets/images/'+ this.$i18n.locale +'.png'+'')" alt=""
				@click="yuyan_show = !yuyan_show">
				
			<div class="checklang" v-show="yuyan_show">
				<router-link to="" @click.native="zh" style="color: #fff;"><img src="~path_img/zh.png"
						alt=""></router-link>
				<router-link to="" @click.native="zhHK" style="color: #fff;"><img src="~path_img/zhHK.png"
						alt=""></router-link>
				<router-link to="" @click.native="en" style="color: #fff;"><img src="~path_img/en.png"
						alt=""></router-link>
			</div>
		</div>
		<div class="con">
			<article class="img-t">
			    <!-- <img :src="require(''+'@/assets/images/'+ this.$i18n.locale +'.png'+'')" alt="" @click="yuyan_show = true"> -->
			
			    <article class="article-input">
					<div>
						<img src="../assets/newimg/zhanghu.png" alt="">
					</div>
			        <input type="text" :placeholder="$t('login.username_placeholder')" v-model="form.username">
			    </article>
			    <article class="article-input">
					<div>
						<img class="img3" src="../assets/newimg/mima.png" alt="">
					</div>
			        <input :type="typePwd" :placeholder="$t('login.password_placeholder')" v-model="form.password">
					<div class="wangji"><router-link to="/forPassword">{{$t('login.wangjimima1')}}</router-link></div>
			        <van-icon :name="iconPwd" size="22" color="#f49623" @click="fun_Pwd"/>
			    </article>
			   <article class="article-btn">
					<p><router-link to="/index">{{$t('login.wangji[3]')}}</router-link></p>
			    </article>
			    <button @click="fun_submit">{{$t('login.denglu_btn')}}</button>
			</article>
		</div>
		<article class="article-btn">
			<div style="margin-right: 20px;"><router-link to="/rechargeHelp?id=13">{{$t('h_title.zizhufuwu_list3')}}</router-link></div>
			<div><router-link to="/drawHelp?id=5">{{$t('h_title.zizhufuwu_list2')}}</router-link></div>
		</article>
		<div class="bottoms">
			<img src="../assets/newimg/loginbottomicon.png" alt="">
			<div>{{$t('login.tips')}}</div>
			<div class="img4"></div>
		</div>
        <!--切换语言模块-->
        <!-- <van-popup v-model="yuyan_show" position="bottom" class="popou_class" style="height: 5.1rem">
            <router-link to="" @click.native="zh" style="color: #fff;"><img src="~path_img/zh.png" alt="">简体中文</router-link>
            <router-link to="" @click.native="zhHK" style="color: #fff;"><img src="~path_img/zhHK.png" alt="">繁体中文</router-link>
            <router-link to="" @click.native="en" style="color: #fff;"><img src="~path_img/en.png" alt="">English</router-link>
        </van-popup> -->
        <!--切换语言模块-->
        <!--忘记密码模块-->
        <van-popup v-model="passW_show" position="bottom" class="popou_class" style="height: 5.1rem">
            <a style="color:#fff;" :href="this.$store.state.config.whatsapp_url">Whats:{{this.$store.state.config.whatsapp}}</a>
            <router-link to="" style="color: #fff;" @click.native="passW_show = false,wx_show = true">{{$t('login.wangji[0]')}}</router-link>
			<a style="color:#fff;" :href="this.$store.state.config.service_link">{{$t('login.wangji[1]')}}</a>
        </van-popup>
        <!--忘记密码模块-->
        <!--微信-->
        <van-popup v-model="wx_show">
            <img :src="this.$https.baseUrl + this.$store.state.config.wx_pic" alt="" class="img">
        </van-popup>
        <!--微信-->
    </section>
</template>

<script>
    import {Popup} from 'vant'
    import https from "@/api/https";
    export default {
        name: "login",
        components: {
            [Popup.name]: Popup
        },
        data() {
            return {
                yuyan_show: false,
                passW_show: false,
                wx_show: false,
                form: {
                    username: localStorage.username ,
                    password: localStorage.password
                },
                typePwd: 'password',
                iconPwd: 'closed-eye',
				setting: {},
            }
        },
        mounted() {
            let _this = this
            this.$https.fetchPost('/m/config',{}).then((res) => {
                document.title = res.data.site_title
				this.setting = res.data
                _this.$store.commit('config',res.data)
            })
            this.$i18n.locale = this.$store.state.i18n
        },
        methods: {
            fun_Pwd() { //切换密码的眼睛
                this.typePwd = this.typePwd === 'password' ? 'text' : 'password'
                this.iconPwd = this.iconPwd === 'closed-eye' ? 'eye-o' : 'closed-eye'
            },
            fun_submit() { //登录
                if(this.form.username == ''){
                    this.$toast(this.$t('login.username_alert'))
                }
                else if(this.form.password == ''){
                    this.$toast(this.$t('login.password_alert'))
                }
                else if(this.form.password.length < 6){
                    this.$toast(this.$t('login.password_alert_length'))
                }
                else{
					
                    this.$https.fetchPost('/m/login',{'name':this.form.username , 'password': this.form.password}).then( res => {
						localStorage.username =this.form.username;
						localStorage.password = this.form.password;
                        this.$store.commit('token',res.data)
                        this.$router.push('/index')
                    })

                }
            },
            zh() {
                this.$store.commit('i18n','zh')
                this.$i18n.locale='zh'
                this.yuyan_show = false
            },
            zhHK() {
                this.$store.commit('i18n','zhHK')
                this.$i18n.locale='zhHK'
                this.yuyan_show = false
            },
            en() {
                this.$store.commit('i18n','en')
                this.$i18n.locale='en'
                this.yuyan_show = false
            },
			gozhuce(){
				this.$router.push('/zhuce')
			}
        }
    }
</script>

<style scoped lang="less">
.login{
    height: 100%;
	min-height: 100vh;
    background: url("../assets/newimg/loginbg.png") center no-repeat;
    background-size: cover;
    .img1{
		margin: 0 auto;
        margin-top: 30px;
        max-width: 290px;
		max-height: 120px;
    }
	.img2{
		width: 97%;
		margin: -10px auto 10px;
	}
	.con{
		margin: 0 17px;
		border: 0;
		border-top-width: 2px;
		border-style: solid;
		border-top-color: #f49623;
	}
    .img-t{
        padding: 24px 20px;
        text-align: right;
		background-color: #303030;
        & > img{
            width: 1rem;
            margin-bottom: .1rem;
        }
        .article-input{
            background: #fff;
            display: flex;
            align-items: center;
            padding: 0 .3rem;
			padding-left: 0;
			overflow: hidden;
            margin-bottom: 12px;
            position: relative;
			border-radius: .2rem;
			div{
				width: 1rem;
				height: 1rem;
				display: flex;
				justify-content: center;
				align-items: center;
				
				img{
				    width: 30px;
				    height: 28px;
				}
				.img3{
					width: 18px;
					height: 18px;
				}
			}
            input{
                flex: 1;
                line-height: 1rem;
                background: transparent;
                border:none;
                font-size: .4rem;
                color: #f49623;
                &::-webkit-input-placeholder {
                    color: #f49623;
                }
            }
			.wangji{
				width: 60px;
				font-size: 12px;
			}
			.wangji a{
				color: #f49623;
			}
            // &:after{
            //     position: absolute;
            //     content: ' ';
            //     width: 1px;
            //     height: .6rem;
            //     background: rgb(127,127,127);
            //     left: 1.3rem;
            // }
        }
        button{
            width: 100%;
			height: 40px;
            background: linear-gradient(to bottom, #eebf46 0%, #f49321 100%) !important;
            font-size: .4rem;
            border:none;
            color: #fff;
            line-height: 0.9rem;
            border-radius: .2rem;
        }
    }
}
.article-btn{
	display: flex;
	justify-content: center;
	width: 75%;
	margin: 5% auto;
	div{
		height: 38px;
		line-height: 38px;
		border: .01rem solid #fff;
		padding: 5px 10px;
		box-sizing: border-box;
		border-radius: 5px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	a{
		color: #fff;
		font-size: 13px;
		display: block;
	}
}
.popou_class{
    border-radius: 5px 5px 0 0;
    background-color: rgba(255,255,255,.8);
    padding: .5rem;
    height: 8.3rem;
    a{
        display: block;
        font-size: .34rem;
        line-height: 1.3rem;
        background-color: rgba(0,0,0,.8);
        margin-bottom: .2rem;
        border-radius: 5px;
        img{
            width: .8rem;
            position: relative;
            top: .1rem;
            margin-right: .3rem;
        }
    }
}
.img{
    width: 7rem;
}
.qiehuanyuyanBox {
	height: 30px;
	position: absolute;
	top: 20px;
	right: 20px;
	img {
		width: 30px;
		height: 30px;
		border-radius: 50%;
		margin-left: 10px;
	}
}
.checklang{
	position: absolute;
	top: 40px;
	left: -2px;
	background-color: #bfbfbf;
	z-index: 1;
	padding: 10px;
	padding-left: 0;
	border-radius: 5px;
}
.ul{
	color: #ffffff80;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	
	.li{
		flex: 1;
		text-align: center;
		height: 42px;
		font-size: 16px;
		font-weight: 600;
		line-height: 42px;
		text-decoration: none;
		color: #999;
		position: relative;
		
		i{
			width: 10px;
			height: 10px;
			position: absolute;
			bottom: 0px;
			left: 48%;
			box-sizing: border-box;
			border-top: 5px solid transparent;
			border-left: 5px solid transparent;
			border-right: 5px solid transparent;
			border-bottom: 5px solid  #f49623;
		}
	}
	.li.active{
		color: #fff;
	}
}

.bottoms{
	color: #ffe44e;
	font-size: 10px;
	text-align: center;
	min-height: 200px;
	height: calc(100vh - 500px);
	position: relative;
	
	img{
		width: 105px;
	}
	div{
		height: 20px;
		line-height: 20px;
	}
	.img4{
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 73px;
		background-size: 100% 100%;
		background-image: url('../assets/newimg/loginbottom.png');
	}
}
</style>

